Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[beam] add DayDivider to list views #180

Merged
merged 9 commits into from
Nov 27, 2024

Conversation

crabinak
Copy link
Collaborator

@crabinak crabinak commented Nov 4, 2024

@agritheory
I've added a DayDivider to the Beam ListView. I centered-aligned the text to help it visually stand out amongst the lists. The medium gray worked best here as the darker colors overpowered the navigation menu. This takes in month, day, and year as props and formats them to display, but it could be reworked to take in an object or however the date would be passed in.

@crabinak crabinak requested a review from agritheory November 4, 2024 16:52
Copy link
Contributor

github-actions bot commented Nov 4, 2024

Coverage Report for ./beam

Status Category Percentage Covered / Total
🔴 Lines 5.3% (🎯 70%) 7 / 132
🔴 Statements 5.63% (🎯 70%) 8 / 142
🔴 Functions 2.43% (🎯 70%) 1 / 41
🔴 Branches 0% (🎯 70%) 0 / 79
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
beam/src/components/BeamDayDivider.vue 0% 0% 0% 0% 17-2
beam/src/components/ListView.vue 0% 0% 0% 0% 29-2
Unchanged Files
beam/src/components/ActionFooter.vue 0% 100% 0% 0% 12-5
beam/src/components/BeamArrow.vue 0% 0% 100% 0% 2-4
beam/src/components/BeamFilter.vue 0% 0% 0% 0% 18-9
beam/src/components/BeamFilterOption.vue 0% 0% 0% 0% 41-21
beam/src/components/BeamMetadata.vue 0% 0% 0% 0% 2-1
beam/src/components/BeamModal.vue 0% 0% 0% 0% 3-5
beam/src/components/BeamModalOutlet.vue 0% 100% 100% 0% 2
beam/src/components/BeamProgress.vue 0% 0% 0% 0% 22-3
beam/src/components/Confirm.vue 0% 0% 0% 0% 4-1
beam/src/components/ItemCheck.vue 0% 0% 0% 0% 9-3
beam/src/components/ItemCount.vue 0% 0% 0% 0% 20-1
beam/src/components/ListAnchor.vue 0% 100% 100% 0% 1
beam/src/components/ListItem.vue 0% 0% 0% 0% 27-15
beam/src/components/Navbar.vue 0% 0% 0% 0% 13-null
beam/src/components/ScanInput.vue 88.88% 100% 50% 87.5% 23
beam/src/components/SplitColumn.vue 0% 0% 100% 0% 5-8
beam/src/composables/mqtt.ts 0% 0% 0% 0% 8-40
Generated in workflow #437 for commit 4a29b14 by the Vitest Coverage Report Action

Copy link
Owner

@agritheory agritheory left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to see the specimen use the ListView component API, I left an example that works but doesn't look right

image

@Alchez Alchez changed the title added DayDivider to Beam [beam] add DayDivider to list views Nov 7, 2024
@Alchez
Copy link
Collaborator

Alchez commented Nov 7, 2024

@crabinak I've added a commit that merges changes from the main branch, so you will have to pull before making more changes.

@crabinak
Copy link
Collaborator Author

@agritheory I updated this to use linkComponent. It accepts a Date object as the prop as well as an option to specify the format. As an example, I provided two date dividers: one as the default DateString and the other using ISOString. I didn't add more format types just incase this feature was not desired.

I also left-aligned the DayeDivider content as having it center-aligned made it stand out but not in a good way.

@Alchez Alchez force-pushed the feat-beam-listview-day-divider branch from 07ade7b to 2618f5a Compare November 26, 2024 10:48
@Alchez Alchez force-pushed the feat-beam-listview-day-divider branch from 9e5b233 to 39892cd Compare November 26, 2024 11:29
@Alchez
Copy link
Collaborator

Alchez commented Nov 26, 2024

@agritheory @crabinak

I added some minor processing changes, and here's what the latest iteration looks like:

image

Let me know if that looks okay.

@agritheory
Copy link
Owner

@crabinak @Alchez How do we feel about using the lighter blue "cell change color" as background for this?

@crabinak
Copy link
Collaborator Author

@Alchez Looks good to me.

@agritheory I updated this to use that light blue color you requested. I also removed the top border from the day divider as it was causing a double border with the bottom border from the previous item.

@Alchez Alchez marked this pull request as ready for review November 27, 2024 06:14
@agritheory agritheory merged commit 56fc061 into development Nov 27, 2024
4 of 5 checks passed
@Alchez Alchez deleted the feat-beam-listview-day-divider branch November 28, 2024 05:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants